<template>
  <div class="product-detail">
    <el-descriptions :column="2" border>
      <template v-if="product.table === 'bijiben'">
        <el-descriptions-item label="笔记本名称">{{ product.bijibenming }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ product.pinpai }}</el-descriptions-item>
        <el-descriptions-item label="价格">{{ product.jiage }}</el-descriptions-item>
        <el-descriptions-item label="价格区间">{{ product.jiagequjian }}</el-descriptions-item>
        <el-descriptions-item label="内存">{{ product.neicun }}</el-descriptions-item>
        <el-descriptions-item label="存储空间">{{ product.cunchukongjian }}</el-descriptions-item>
        <el-descriptions-item label="颜色">{{ product.yanse }}</el-descriptions-item>
        <el-descriptions-item label="材质">{{ product.caizhi }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ product.shengchanriqi }}</el-descriptions-item>
        <el-descriptions-item label="生产商">{{ product.shengchanshang }}</el-descriptions-item>
        <el-descriptions-item label="上市日期">{{ product.shangshiriqi }}</el-descriptions-item>
        <el-descriptions-item label="笔记本详情" :span="2">{{ product.bijibenxiangqing }}</el-descriptions-item>
      </template>

      <template v-if="product.table === 'diannaozhuji'">
        <el-descriptions-item label="主机名称">{{ product.zhujiming }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ product.pinpai }}</el-descriptions-item>
        <el-descriptions-item label="价格">{{ product.jiage }}</el-descriptions-item>
        <el-descriptions-item label="价格区间">{{ product.jiagequjian }}</el-descriptions-item>
        <el-descriptions-item label="CPU">{{ product.cpu }}</el-descriptions-item>
        <el-descriptions-item label="主板">{{ product.zhuban }}</el-descriptions-item>
        <el-descriptions-item label="内存">{{ product.neicun }}</el-descriptions-item>
        <el-descriptions-item label="硬盘">{{ product.yingpan }}</el-descriptions-item>
        <el-descriptions-item label="显卡">{{ product.xianka }}</el-descriptions-item>
        <el-descriptions-item label="电源">{{ product.dianyuan }}</el-descriptions-item>
        <el-descriptions-item label="机箱">{{ product.jixiang }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ product.shengchanriqi }}</el-descriptions-item>
        <el-descriptions-item label="生产商">{{ product.shengchanshang }}</el-descriptions-item>
        <el-descriptions-item label="主机介绍" :span="2">{{ product.zhujijieshao }}</el-descriptions-item>
      </template>

      <template v-if="product.table === 'yingjianzuzhuang'">
        <el-descriptions-item label="硬件名称">{{ product.yingjianming }}</el-descriptions-item>
        <el-descriptions-item label="硬件类型">{{ product.yingjiantype }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ product.pinpai }}</el-descriptions-item>
        <el-descriptions-item label="价格">{{ product.jiage }}</el-descriptions-item>
        <el-descriptions-item label="价格区间">{{ product.jiagequjian }}</el-descriptions-item>
        <el-descriptions-item label="型号">{{ product.xinghao }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ product.shengchanriqi }}</el-descriptions-item>
        <el-descriptions-item label="生产商">{{ product.shengchanshang }}</el-descriptions-item>
        <el-descriptions-item label="硬件介绍" :span="2">{{ product.yingjianjieshao }}</el-descriptions-item>
      </template>

      <template v-if="product.table === 'diannaowaishe'">
        <el-descriptions-item label="外设名称">{{ product.waishemingcheng }}</el-descriptions-item>
        <el-descriptions-item label="外设分类">{{ product.waishefenlei }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ product.pinpai }}</el-descriptions-item>
        <el-descriptions-item label="价格">{{ product.jiage }}</el-descriptions-item>
        <el-descriptions-item label="价格区间">{{ product.jiagequjian }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ product.shengchanriqi }}</el-descriptions-item>
        <el-descriptions-item label="生产商">{{ product.shengchanshang }}</el-descriptions-item>
        <el-descriptions-item label="上市日期">{{ product.shangshiriqi }}</el-descriptions-item>
        <el-descriptions-item label="外设介绍" :span="2">{{ product.waishejieshao }}</el-descriptions-item>
      </template>
    </el-descriptions>

    <div class="product-image">
      <el-image 
        style="width: 200px; height: 200px"
        :src="product.tupian"
        :preview-src-list="[product.tupian]">
      </el-image>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.product-detail {
  padding: 20px;
}
.product-image {
  margin-top: 20px;
  text-align: center;
}
</style>